<template>
  <Card>
    <p slot="title">会员等级</p>
    <div class="search-con search-con-top">
      <div>
        <Button @click="editUserLevel(false)" type="primary" style="margin-left: 10px;">新增会员等级</Button>
        <Button @click="reset" type="success" icon="ios-refresh" style="margin-left: 10px;">刷新</Button>
      </div>
    </div>
    <Table :columns="columns" :data="list" ref="selection" border style="margin-top: 10px;">
      <template slot-scope="{ row , index}" slot="makeSlot">
        <Button type="success" size="small" @click="editUserLevel(row)">编辑</Button>
        <Button type="error" size="small" style="margin-left: 10px;" @click="del(row.id)">删除</Button>
      </template>
    </Table>

    <Paginate :total="total" @on-change="changePage" @on-page-size-change="changeSize">
    </Paginate>

    <!-- 编辑 -->
    <Modal v-model="editUserModal" title="编辑" @on-ok="editUserModalOk">
      <Form :model="formUserItem" :label-width="80">
        <FormItem label="等级名称">
          <Input v-model="formUserItem.name" placeholder="请输入等级名称"></Input>
        </FormItem>
        <FormItem label="等级图标">
          <Upload ref="upload" name="image" :headers="header" :action="action_url" :show-upload-list="false"
            :format="['jpg', 'jpeg', 'png']" :on-format-error="handleFormatError" :on-success="handleSuccess">
            <Button icon="ios-cloud-upload-outline">点击上传</Button>
          </Upload>
        </FormItem>
        <FormItem class="item">
          <img :src="baseImgUrl + formUserItem.img" style="width: 100px;height: 100px;"
            v-show="formUserItem.img">
        </FormItem>
        <FormItem label="累计积分">
          <Input v-model="formUserItem.amount" placeholder="请输入累计积分" type="number"></Input>
        </FormItem>
        <FormItem label="优惠百分比">
          <Input v-model="formUserItem.preferential" placeholder="优惠百分比" type="number"></Input>
        </FormItem>
        <FormItem label="等级说明">
          <Input v-model="formUserItem.intro" placeholder="请输入等级说明"></Input>
        </FormItem>
      </Form>
    </Modal>
  </Card>
</template>

<script>
import config from "@/config";
import { getToken } from "../../libs/util";
import Paginate from "@/components/paginate/paginate.vue";
const baseUrl = process.env.NODE_ENV === "development" ? config.baseUrl.dev : config.baseUrl.pro;
const baseImgUrl = process.env.NODE_ENV === "development" ? config.baseImgUrl.dev : config.baseImgUrl.pro;
export default {
  name: "userLevel",
  components: {
    Paginate,
  },
  data() {
    return {
      baseUrl: baseUrl,
      baseImgUrl: baseImgUrl,
      action_url: baseUrl + "/admin/image/uploadImg",
      header: { token: getToken() },
      // 列表
      columns: [
        {
          title: '等级名称',
          align: "center",
          key: 'name',
        },
        {
          title: '累计积分',
          align: "center",
          key: 'amount',
        },
        {
          title: '等级图标',
          align: "center",
          key: 'img',
          render: (h, param) => {
            return h("img", {
              attrs: {
                src: baseImgUrl + param.row.img
              },
              style: {
                width: '80px',
                height: '60px'
              }
            });
          }
        },
        {
          title: '优惠百分比',
          align: "center",
          key: 'preferential',
        },
        {
          title: '等级说明',
          align: "center",
          key: 'intro',
        },


        {
          title: '操作',
          align: "center",
          slot: 'makeSlot',
          width: 210
        },
      ],
      // 数据
      list: [],
      total: 0,
      editUserModal: false,
      formUserItem: {
      },
    }
  },
  methods: {
    // 查询管理员信息
    getList() {
      let params = {
        ...this.searchData,
      };
      this.$axios('/admin/user_level/getList', params).then(res => {
        this.list = res.data;
        this.total = res.total;
      });
    },
    search() {
      this.searchData.page = 1;
      this.getList();
    },
    reset() {
      this.searchData = {
        page: 1,
        limit: 10,
      };
      this.getList();
    },
    changePage(page) {
      this.searchData.page = page;
      this.getList();
    },
    changeSize(size) {
      this.searchData.limit = size;
      this.getList();
    },
    editModalCancel() { },
    edit(row) {
      this.formItem.id = row.id;
      this.editModal = true;
    },
    editUserLevel(row) {
      if (row) {
        this.formUserItem = { ...row };
      } else {
        this.formUserItem = {
          id: 0,
          name: "",
          img: '',
          amount: "",
          preferential: "",
          intro: ""
        }
      }
      this.editUserModal = true;
    },
    editUserModalOk() {
      if (this.formUserItem.id > 0) {
        this.$axios('/admin/user_level/edit', this.formUserItem).then(res => {
          this.$Message.success('编辑成功');
          this.formUserItem = {};
          this.getList();
        });
      } else {
        this.$axios('/admin/user_level/add', this.formUserItem).then(res => {
          this.$Message.success('添加成功');
          this.formUserItem = {};
          this.getList();
        });
      }

    },
    del(id) {
      this.$axios('/admin/user_level/del', { id: id }).then(res => {
        this.$Message.success('删除成功');
        this.getList();
      });
    },
    handleSuccess(res, file) {
      this.$set(this.formUserItem,'img',res.data.src);
      // this.formUserItem.level_img = res.data.src;
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: "文件格式错误",
        desc: "不支持该文件类型",
      });
    },
  },
  created() {
    this.getList();
  }
}
</script>
<style></style>
